<template>
    <view class="bg-content">
        <div style="background-color: white; padding: 2px 0px;">
            <div style="display: flex;">
                <div style="width: 100%; padding-right: 10px;">
                    <u-search placeholder="请输入消费券号" shape="square" v-model="searchKeyword" @search="onSearch" @custom="onSearch"></u-search>
                </div>
                <div style="width: 80px; padding: 3px; margin-right: 5px;">
                    <u-button type="success" size="mini" :plain="true" @click="scan()">
                        <u-icon name="scan" style="padding-right: 2px;"></u-icon>
                        扫一扫
                    </u-button>
                </div>
            </div>
        </div>

        <view class="order" v-for="(tbOrder, index) in tbOrderList" :key="tbOrder.id">
            <view class="top">
                <view class="left" @click="navigateTo('/pages/common/store/index', {storeId: tbOrder.tbStore.id})">
                    <u-icon name="/pages/sub/sub2-store-platform/static/icon/shop.png" :size="40" color="rgb(94,94,94)"></u-icon>
                    <view class="store">{{ tbOrder.tbStore.name }}</view>
                    <u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
                </view>
                <view class="right">{{ tbOrder.statusText }}</view>
            </view>
            <view class="item" v-for="(tbOrderGoods, i) in tbOrder.tbOrderGoodsList" :key="tbOrderGoods.id" @click.stop.prevent="gotoOrderDetail(tbOrder)">
                <view class="left">
                    <image :src="tbOrderGoods.image ? tbOrderGoods.image + '?imageView2/1/w/300/h/300' : '/pages/sub/sub2-store-platform/static/default-image/goods.jpg'"
                           mode="aspectFill"></image>
                </view>
                <view class="content">
                    <view class="title u-line-2">{{ tbOrderGoods.title }}</view>
                    <view class="type">
                        {{tbOrderGoods.specName}}<label v-if="tbOrderGoods.colorId">;{{tbOrderGoods.colorName}}</label>
                    </view>
                </view>
                <view class="right">
                    <view class="price">
                        ￥{{ tbOrderGoods.price | toFixed2 }}
                    </view>
                    <view class="number">x{{ tbOrderGoods.quantity }}</view>
                </view>
            </view>
            <view class="total">
                共{{ tbOrder.quantity }}件商品 实付:
                <text class="total-price">
                    ￥{{ tbOrder.payMoney | toFixed2 }}
                </text>
            </view>
            <view class="bottom" v-if="tbOrder.enableOperation">
                <div class="order-btn-group" style="width: 100%; text-align: right;">
                    <!--直接退款-->
                    <u-button plain size="mini" v-if="tbOrder.status === '1'"
                              @click="updateStatus(tbOrder, '4', '是否使用该消费券？')">
                        使用消费券
                    </u-button>
                </div>
            </view>
        </view>

        <view class="centre" v-if="!tbOrderList.length">
            <image src="/pages/sub/sub2-store-platform/static/img/taobao-order.png" mode=""></image>
            <view class="explain">
                您还没有相关的订单
                <view class="tips">可以去看看有那些想买的</view>
            </view>
            <view class="btn" @click="uni.reLaunch({url: '/pages/sub/sub1-tabs/tabs/index'})">随便逛逛</view>
        </view>
    </view>
</template>

<script>

    import {CommonUtil} from "@/dev/core/utils/common.util";
    import {TbOrderService} from "@/dev/services/tb-order.service";

    export default {
        data() {
            return {
                searchKeyword: '',
                tbOrderList: []
            }
        },
        onReady() {
            const _self = this;
        },
        methods: {
            onSearch(event) {
                this.searchKeyword = CommonUtil.trim(this.searchKeyword);
                this.doRefresh(this.tbOrderList);
            },
            /**
             * 加载更多数据中
             * @param infiniteScroll
             */
            doInfinite(infiniteScroll) {
                const _self = this;
                new TbOrderService().findTableListCascade({
                    pagination: this.pagination,
                    data: {
                        storeId: this.globalVariable.userInfo.tbStore.id,
                        saleMode: "1",
                        status: "1",
                        consumerVoucher: this.searchKeyword
                    }
                }).then(result => {
                    console.log(_self.tbOrderList)
                    _self.pagination.refreshPage(result)
                    _self.tbOrderList = [..._self.tbOrderList, ...result.list]
                })
            },
            updateStatus(tbOrder, status, hint) {
                const _self = this;
                CommonUtil.alert({
                    title: '提示！',
                    content: hint,
                    showCancel: true, // 是否显示取消按钮
                    success: function (res) {
                        if (res.cancel) { // 点击取消,默认隐藏弹框
                        } else { // 点击确定
                            new TbOrderService().updateStatus({
                                id: tbOrder.id,
                                status: status,
                            }).then(result => {
                                if (result.status === 'success') {
                                    CommonUtil.mergeData(_self, tbOrder, CommonUtil.deleteNullAttrInObject(result.data));
                                    CommonUtil.alert('操作成功');
                                } else {
                                    CommonUtil.alert(result.message);
                                }
                            });
                        }
                    }
                });
            },
            gotoOrderDetail(tbOrder) {
                this.navigateTo(`/pages/sub/sub2-store-platform/store-platform/store-platform-consumer-voucher/store-platform-consumer-voucher-detail/index`, null, tbOrder);
            },
            scan() {
                const _self = this;
                _self.searchKeyword = '';
                _self.tbOrderList = [];
                uni.scanCode({
                    success: function (res) {
                        console.log('条码内容：' + res.result);
                        _self.searchKeyword = CommonUtil.trim(res.result);
                        _self.doRefresh(_self.tbOrderList);
                    }
                });
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "./index.scss";
</style>
